<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>设备列表</title>
    <link rel="stylesheet" href="../../css/api.css">
    <style>
        html,
        body {
            height: 100%;
            background-color: #f7f7f7;
        }

        header {
            position: relative;
            height: 44px;
            padding: 0 15px;
        }

        header #title {
            line-height: 44px;
            height: 44px;
            font-size: 16px;
            color: #333;
            text-align: center;
            padding: 0 44px;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        header span {
            position: absolute;
            display: block;
            bottom: 0px;
            width: 44px;
            height: 44px;
            background-repeat: no-repeat;
            background-size: 15px;
            background-position: center;
        }

        header .return {
            left: 15px;
            background-image: url('../../image/close.png');
        }

        #list li {
            display: -webkit-box;
            -webkit-box-pack: center;
            -webkit-box-align: center;
            height: 36px;
            margin: 8px;
            background-color: rgba(240, 240, 240, 1.0);
            border-color: rgba(220, 220, 220, 1.0);
            border-width: 2px;
            border-style: solid;
        }
    </style>
</head>

<body>
    <header>
        <p id="title">链接设备</p>
        <span class="return" tapmode onclick="api.closeFrame();"></span>
    </header>
    <section id="main">

        <ul id="list">

        </ul>

    </section>
    <footer></footer>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/doT.js"></script>
<script type="text/template" id="deviceListTemp">
    {{~it:value:index}}
    <li tapmode onclick="SelectDevice('{{=value.name}}','{{=value.ip}}')">{{=value.name}}</li>
    {{~}}
</script>
<script>

    var header, headerH, footer, footerH;
    apiready = function () {
        header = $api.dom('header');
        footer = $api.dom('footer');
        headerH = $api.fixStatusBar(header);
        footerH = $api.fixTabBar(footer);

        //通知开始搜索设备
        api.sendEvent({
            name: 'searchDevice'
        });

        //接受设备搜索结果
        api.addEventListener({
            name: 'searchDeviceResult'
        }, function (ret, err) {
            UpdateData(ret.value.list,true);
        });
    }

    //渲染数据
    function UpdateData(_data, _clean) {

        var list = $api.byId("list");
        var temptf = doT.template($api.byId('deviceListTemp').innerHTML);
        var resultText = temptf(_data);
        if (_clean) {
            $api.html(list, resultText);
        } else {
            $api.append(list, resultText);
        }

    }

    //选择设备，直接链接
    function SelectDevice(_name, _ip) {
        //通知链接设备,链接即关闭当前界面
        api.sendEvent({
            name: 'connectDevice',
            extra: {
                name: _name,
                ip: _ip
            }
        });
    }

</script>

</html>